<template>
	<view class="single-main">
		<view class="banner">
			<swiper :current="bannerIndex" @change="swChange">
				<swiper-item v-for="(item, index) in bannerList" :key="index">
					<image mode="aspectFill" lazy-load="true" :src="item" @click="$imgPreview(item, index, '', bannerList)"></image>
				</swiper-item>
			</swiper>
			<view class="city">{{ bannerIndex + 1 }}/{{ bannerList.length }}</view>
		</view>
		<view class="preview" v-if="moreBanner.length">
			<swiper :display-multiple-items="4" autoplay="true" class="preview-swiper" previous-margin="30rpx" next-margin="30rpx">
				<swiper-item class="preview-item" v-for="(item,index) in moreBanner" :key="index">
					<image @click="handlePreviewImage(moreBanner,index)" class="preview-item__image" :src="item" lazy-load="true" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 商品名-->
		<view class="car-des">
			<view class="car-title">
				<view class="car-t-name ">
					<text class="car-t__txt">{{ title.name }}</text>

					<view class="like" @click="joinlike">
						<text :class="is_collection == 0 ? 'iconfontPT iconshoucang-weixuanzhong' : 'iconfontPT iconshoucang-yixuanzhong '"></text>
					</view>
				</view>
				<!-- <view class="mt28 clear">
					
					<text class="f24">厂商指导价：</text>
					<text class="f34 ce41">{{title.fac_price}}</text>
					<text class="f24 ce41" v-if="title.fac_price!='暂无'">万</text> -->
				<!-- <view class="like pull-right" @click="joinlike">
						<text :class="is_collection == 0?'iconfontPT iconjiarushoucang':'iconfontPT iconshoucang-yixuanzhong1 '"></text>
					</view>
				</view> -->
			</view>
			<view class="car-price-block clear" v-if="detailType === 'staging'">
				<view class="car-price-block__item">
					<text class="price-type-name">首付</text>
					<view class="price-number-block price-number-block--orange">
						<text class="price-number">{{ first }}</text>
						<text class="price-txt"> 元</text>
					</view>
				</view>
				<view class="car-price-block__item">
					<text class="price-type-name">月供</text>
					<view class="price-number-block price-number-block--primary">
						<text class="price-number">{{ month }}</text>
						<text class="price-txt"> 元</text>
					</view>
				</view>
				<view class="car-price-block__item">
					<text class="price-type-name">期数</text>
					<view class="price-number-block price-number-block--red">
						<text class="price-number">{{ month_nums }}</text>
					</view>
				</view>
			</view>
			
			<view v-else class="car-price-block clear">
				<view class="car-price-block__item">
					<text class="price-type-name">指导价</text>
					<view class="price-number-block price-number-block--red">
						<text class="price-number">{{ title.fac_price}}</text>
						<text class="price-txt"> 万</text>
					</view>
				</view>
				<view class="car-price-block__item">
					<text class="price-type-name">优惠价</text>
					<view class="price-number-block price-number-block--orange">
						<text class="price-number">{{ title.special_price}}</text>
						<text class="price-txt"> 万</text>
					</view>
				</view>
				<view class="car-price-block__item">
					<text class="price-type-name">到手价</text>
					<view class="price-number-block price-number-block--primary">
						<text class="price-number">{{ title.diff_price }}</text>
						<text class="price-txt"> 万</text>
					</view>
				</view>
			</view>
			
		</view>
		<!-- 活动 -->
		<view class="shop-active">
			<view class="c999 mb40 car-gift">
				<view class="shop-w">购车礼包</view>
				<view class="shop-txt c333" @click="showmsg()">{{ activity.length > 20 ? activity && activity.slice(0, 20) + '...' : activity }}</view>
			</view>
			<view class="c999 car-gift">
				<view class="shop-w">提车地点</view>
				<view class="shop-txt c333">{{ title.mention_city || '请联系经销商咨询' }}</view>
			</view>
		</view>
		<!-- 颜色 -->
		<view class="color-txt mt30">
			<view class="flex1 c999 shop-w">外观</view>
			<view class="flex2">
				<u-radio-group v-model="params.out_color" active-color="#fc830c">
					<u-radio v-for="(item,index) in out" :key="index" :name="item">
						{{item}}
					</u-radio>
				</u-radio-group>
			</view>
		</view>
		<view class="color-txt bb20 pb30">
			<view class="flex1 c999 shop-w">内饰</view>
			<view class="flex2">
				<u-radio-group v-model="params.inter_color" active-color="#fc830c">
					<u-radio v-for="(item,index) in inter" :key="index" :name="item">
						{{item}}
					</u-radio>
				</u-radio-group>
			</view>
		</view>

		
		<view class="more-compare">
			<view class="more-compare__title"><text>同比推荐</text></view>
			<view class="more-compare__content">
				<view v-for="(item, index) in more" :key="index">
					<view class="more-compare__item" @click="toSingle(item.id)">
						<view class="more-compare__item--txt">
							<text class="more-compare__item__name">{{ item.name }}</text>
							<text class="more-compare__item__price">
								<text class="iconfontPT  iconjiangjia icon-price"></text>
								{{ item.special_price }}万
							</text>
						</view>

						<view class="more-compare__item__origin-price">
							<text>厂商指导价：{{ item.fac_price }}万</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 猜你喜欢 -->
		<view class="recommend">
			<view class="recommend-title">热门车系</view>
			<view class="recommend-car-list">
				<view @click="toCarDetail(item.id)" class="single-car" v-for="(item, index) in like" :key="index">
					<view class="single-car-img"><image mode="aspectFill" :src="item.image" lazy-load="true"></image></view>
					<view>{{ item.name }}</view>
				</view>
			</view>
		</view>
		<!-- 图片预览 -->
		<view class="mask" v-if="imgstate" @click="showMask">
			<movable-area scale-area class="movable-area">
				<movable-view class="movable-view" direction="all" scale="true" scale-min="1" scale-max="5" :scale-value="scale" out-of-bounds="true">
					<image @click.stop="" :style="{ width: width + 'rpx', height: height + 'rpx' }" :src="imageMaskData"></image>
					<text class="iconfontPT uni-icon-close"></text>
				</movable-view>
			</movable-area>
		</view>
		<view class="footer">
			<view class="footer-btn default-btn" @click="phoneListPopupShow = true">免费咨询</view>
			<view class="footer-btn mr30" @click="toask(1)">购车服务</view>
		</view>
		<u-popup v-model="phoneListPopupShow" mode="bottom">
			<view class="phone-popup-body">
				<view class="phone-list">
					<view class="phone-list__item" v-for="item in phoneList" :key="item.phone" @click="handlePhoneCall(item.phone)">
						<view class="phone-list__name">{{item.name}}</view>
						<view class="phone-list__phone">{{item.phone}}</view>
					</view>
				</view>
			</view>
			<view class="phone-popup-action">
				<button class="phone-popup-action__button" @click="phoneListPopupShow = false" type="default">
					取消
				</button>
			</view>
		</u-popup>
	</view>
</template>
<script>
import { carDetail, carLike, free, getPhoneList } from '../../../../apis/new-car/index.js';
import { collect } from '../../../../apis/used-car/api.js';

export default {
	data() {
		return {
			phoneList:[],
			phoneListPopupShow:false,
			bannerList: [], //banner图片
			moreBanner:[],
			carType: ['智能排序', '价格最低', '离我最近'],
			btnIndex: 0,
			bannerIndex: 0,
			phone: '',
			cid: '',
			title: [],
			listData: [],
			like: [],
			v_id: '',
			c_id: '',
			activity: [],
			telephone: '',
			out: [],
			inter: [],
			outindex: 0,
			userinfo: {}, //免费咨询
			first:'',
			month:'',
			month_nums:'',
			detailType:'',
			params: {
				city: '',
				guid: '',
				name: '',
				headimgurl: '',
				phone: '',
				factory_id: '',
				out_color: '',
				inter_color: ''
			},
			is_collection: 0, // 1 收藏
			servicePrice: 0,
			/**图片预览*/
			imageMaskData: '',
			imgstate: false,
			width: '',
			height: '',
			distance: '',
			oldwidth: '',
			oldheight: '',
			scale: 0,
			more: []
		};
	},
	onLoad(option) {
		this.detailType = option.detailType
		this.first = option.first
		this.month = option.month
		this.month_nums = option.month_nums
		this.getPhoneList()
		let _self = this;
		_self.cid = option.cid;
		_self.vid = option.vid;
		_self.initData();

		uni.getStorage({
			key: 'position',
			success: function(e) {
				_self.params.city = e.data;
			}
		});
		_self.getCar();
		_self.youlike();
	},
	methods: {
		async getPhoneList(){
			try{
				const {code,data,msg} = await getPhoneList()
				if(code === 1){
					this.phoneList = data
				}else{
					uni.showModal({ title:'出错啦！',content:msg,showCancel:false})
				}
			}catch(e){
				uni.showModal({ title:'出错啦！',content:e.message,showCancel:false})
			}
		},
		joinlike() {
			if(!uni.getStorageSync('openId')){
				uni.navigateTo({url:'/pages/authorize'})
				return false
			}
			let userInfo = {};
			let _that = this;
			let is_delete = _that.is_collection ? 1 : 0;
			uni.getStorage({
				key: 'userInfo',
				success(e) {
					userInfo = e.userinfo;
					collect({
						uid: uni.getStorageSync('userId'),
						collection_id: _that.cid,
						is_delete: is_delete,
						type: 1
					}).then(res => {
						if (res.code == 1) {
							_that.is_delete = is_delete ? 0 : 1;
							_that.getCar();
						}
					});
				}
			});
		},
		img(src) {
			let that = this;
			uni.getImageInfo({
				src: src,
				success: function(msg) {
					let img_w = msg.width,
						img_h = msg.height,
						scale = img_w / img_h;
				}
			});
		},
		start: function(res) {
			let that = this;
			if (res.touches.length == 2) {
				let _x = res.touches[1].pageX - res.touches[0].pageX,
					_y = res.touches[1].pageY - res.touches[0].pageY,
					distance = Math.sqrt(Math.pow(_x, 2) + Math.pow(_y, 2)); //实际距离
				this.distance = distance;
				console.log(distance, 'test');
				this.oldwidth = this.width;
				this.oldheight = this.height;
			}
		},
		move: function(res) {
			if (res.touches.length == 2) {
				let _x = res.touches[1].pageX - res.touches[0].pageX,
					_y = res.touches[1].pageY - res.touches[0].pageY,
					newdistance = Math.sqrt(Math.pow(_x, 2) + Math.pow(_y, 2)),
					width = this.width,
					height = this.height,
					distance = this.distance,
					end_distance = newdistance - distance, //计算手指移动的距离
					pic_scale = 1 + end_distance * 0.002; //0.002是为了使图片放大和缩小时的平缓，不突兀
				this.scale = Math.floor(pic_scale);
				this.width = width * pic_scale;
				this.height = height * pic_scale;
			}
		},
		end() {
			let max = this.width / this.oldwidth;
			if (max > 2) {
				this.width = this.oldwidth * 2;
				this.height = this.oldheight * 2;
			} else if (max < 1) {
				this.width = this.oldwidth;
				this.height = this.oldheight;
			}
		},

		/**预览大图页 */
		showMask(val) {
			let that = this;
			that.imageMaskData = val;
			that.imgstate = !that.imgstate;
		},

		swChange(e) {
			this.bannerIndex = e.detail.current;
		},
		/**选择车型 */
		selectType(index) {
			let _self = this;
			_self.btnIndex = index;
			_self.getCar(index);
		},
		// 初始化
		initData() {
			// 获取数据
			this.callGetPhone = this.callGetPhone;
		},
		/**拨打电话给收件人*/
		callGetPhone(telPhone) {
			this.callPhone(telPhone);
		},
		//弹窗
		showmsg() {
			uni.showModal({
				content: this.activity,
				showCancel: false
			});
		},
		handlePhoneCall(phone){
			if(!uni.getStorageSync('openId')){
				uni.navigateTo({url:'/pages/authorize'})
				return false
			};
			free({
				guid:uni.getStorageSync('userId'),
				headimgurl:uni.getStorageSync('userInfo').avatarUrl,
				name:uni.getStorageSync('userInfo').nickName,
				phone,
				factory_id:uni.getStorageSync('factory_id'),
				yum: this.params.yum,
				car_name:this.params.car_name,
				distrib_id:this.params.distrib_id,
				city:this.params.city,
				v_name:this.params.v_name
			});
			uni.makePhoneCall({
				phoneNumber:phone,
				success(){
					console.log('拨打电话成功！')
				},
				fail(){
					console.log('拨打电话失败！')
				}
			})
		},
		/**
		 * 拨打电话 - 可简单封装工具集
		 */
		callPhone(phoneNumber) {
			uni.makePhoneCall({
				phoneNumber: phoneNumber,
				success: function() {},
				fail: function() {
					console.log('拨打电话失败！');
				}
			});
		},
		/*去车系页*/
		toCarDetail(id) {
			uni.navigateTo({
				url: '../../detail/carDetail/carDetail?v_id=' + id + '&city=' + this.params.city
			});
		},
		/**
		 * 去获取底价*/
		toask(type, id) {
			if(!uni.getStorageSync('openId')){
				uni.navigateTo({url:'/pages/authorize'})
				return false
			}
			let _self = this;
			// return;
			uni.navigateTo({
				url:
					'../../list/base/base?type=car&cid=' +
					_self.cid +
					'&vid=' +
					_self.vid +
					'&price=' +
					_self.servicePrice.newCar +
					'&sid=' +
					_self.params.distrib_id +
					'&yum=' +
					_self.params.yum +
					'&city=' +
					_self.params.city +
					'&inter_color=' +
					_self.params.inter_color +
					'&out_color=' +
					_self.params.out_color
			});
		},
		/**猜你喜欢*/
		youlike() {
			let _self = this;
			carLike()
				.then(res => {
					_self.like = res.data.like;
				})
				.catch(err => {
					console.log(err);
				});
		},
		/* 调整数据格式 */
		formatDataList(list) {
			let newList = [];
			for (let i in list) {
				newList.push({
					img: list[i]
				});
			}
			return newList;
		},
		/*车型数据列表*/
		getCar(index) {
			let _self = this,
				params = {
					uid: uni.getStorageSync('userId'),
					cid: _self.cid,
					s_type: index || 0
				};
			carDetail(params)
				.then(res => {
					_self.imageMaskData = res.data.banner;
					// _self.bannerList = _self.formatDataList(list)
					_self.bannerList = res.data.banner || [];
					_self.moreBanner = res.data.moreBanner||[]
					_self.title = res.data.car;
					_self.params.yum = res.data.car.yum;
					_self.params.car_name = res.data.car.name;
					_self.params.v_name = res.data.car.v_name;
					_self.params.distrib_id = res.data.car.distrib_id;
					_self.listData = res.data.list;
					_self.out = Object.values(res.data.outward);
					_self.inter = Object.values(res.data.inter);
					_self.params.out_color = _self.out[0]
					_self.params.inter_color = _self.inter[0]
					_self.activity = res.data.activity;
					_self.phone = res.data.telephone;
					_self.servicePrice = res.data.servicePrice;
					_self.is_collection = res.data.car.is_collection;
					_self.telephone = res.data.telephone || '';
					_self.more = res.data.more || [];
					_self.title.fac_price = Number(res.data.car.fac_price, 10).toFixed(2);
					_self.title.special_price = Number(res.data.car.special_price, 10).toFixed(2);
					_self.title.diff_price = (_self.title.fac_price - _self.title.special_price).toFixed(2);
					let type = JSON.parse(JSON.stringify(_self.title));

					if (type.length == 0) {
						this.showNone = true;
					} else {
						this.showNone = false;
					}
					
					uni.setStorageSync('outColorList',this.out)
					uni.setStorageSync('interColorList',this.inter)
				})
				.catch(err => {
					console.log(err);
				});
		},

		// 图片预览
		imagepre(index) {
			uni.previewImage({
				current: this.bannerList[index],
				urls: [
					// 所有图片的URL列表，数组格式
					this.imageMaskData.cover,
					this.imageMaskData.style,
					this.imageMaskData.inside
				]
			});
		},
		toSingle(id) {
			uni.navigateTo({
				url: '../carSingle/carSingle?cid=' + id + '&vid=' + this.vid + '&yum'
			});
		},
		handlePreviewImage(urls,current){
			uni.previewImage({urls,current})
		}
	}
};
</script>

<style lang="less">
.iconshoucang-yixuanzhong1 {
	color: #fc830c;
}
.single-main {
	position: relative;
	width: 100%;
	overflow-x: hidden;

	.banner {
		width: 100%;
		height: 446rpx;
		position: relative;
	}

	.banner swiper,
	.banner image {
		width: 100%;
		height: 100%;
	}

	.city {
		min-width: 92rpx;
		height: 48rpx;
		color: #fff;
		background: rgba(0, 0, 0, 0.4);
		font-size: 28rpx;
		line-height: 48rpx;
		border-radius: 24rpx;
		position: absolute;
		text-align: center;
		right: 30rpx;
		bottom: 30rpx;
	}

	.car-des {
		width: 100%;
		// position: absolute;
		// top: 435rpx;
		// height: 170rpx;
		padding: 10rpx 0;
		// box-shadow: 0rpx 5rpx 15rpx 3rpx rgba(153, 153, 153, 0.15);
		background: #fff;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		align-items: center;
		z-index: 45;
		// display: flex;
		overflow: auto;
	}

	.car-title {
		margin: 0 30rpx;
		flex: 2;
	}

	.c333 {
		color: #333;
	}

	.f44 {
		font-size: 37rpx;
	}

	.f24 {
		font-size: 24rpx;
	}

	.f34 {
		font-size: 34rpx;
	}

	.mr30 {
		margin-right: 30rpx;
	}

	.ce41 {
		color: #e41805;
	}

	.c999 {
		color: #999;
	}

	.ml18 {
		margin-left: 18rpx;
	}

	.mt28 {
		margin-top: 28rpx;
		// height: 46rpx;
		// line-height: 46rpx;
	}

	.mb28 {
		margin-bottom: 28rpx;
	}

	.f18 {
		font-size: 18rpx;
	}

	.flex1 {
		padding-right: 4rpx;
	}

	.flex2 {
		flex: 2;
		width: 80%;
		text-align: left;
		justify-content: left;
		margin-top: -8rpx;
	}

	// 活动
	.shop-active,
	.color-txt {
		font-size: 28rpx;
		overflow: hidden;
	}

	.color-txt {
		padding: 0rpx 30rpx;
	}

	.mt30 {
		margin-top: 30rpx;
		margin-bottom: 40rpx;
	}

	.pb30 {
		padding-bottom: 30rpx;
	}

	.shop-active {
		padding: 30rpx;
		border-bottom: 20rpx solid #f8f8f8;
		border-top: 20rpx solid #f8f8f8;
	}

	.car-gift {
		display: flex;
	}

	.shop-active .mb40 {
		margin-bottom: 40rpx;
	}

	.shop-txt {
		margin-left: 10rpx;
		flex: 1;
		flex-wrap: wrap;
	}

	// 颜色
	.color-txt {
		display: flex;
		text-align: left;
		// align-items: center;
		justify-content: space-around;
	}

	.bb20 {
		border-bottom: 20rpx solid #f8f8f8;
	}

	/*  */
	.footer {
		width: 100%;
		background: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		// padding: 30rpx 0;
		font-size: 32rpx;
		display: flex;
		box-shadow: 0px 1px 17px 1px rgba(0, 0, 0, 0.1);
		z-index: 55;
		padding: 20px 0;
	}

	.footer-btn {
		height: 72rpx;
		line-height: 72rpx;
		flex: 1;
		background: rgb(230, 23, 4);
		/* margin: 14rpx 44rpx 62rpx; */
		text-align: center;
		color: #fff;
		border-radius: 15rpx;
		margin-left: 30rpx;
	}

	.default-btn {
		background: #fff;
		border: 1px solid rgb(230, 23, 4);
		color: rgb(230, 23, 4);
	}

	/* 猜你喜欢 */
	.recommend {
		margin: 40rpx 30rpx 196rpx;
		color: #333;
	}

	.recommend-title {
		font-size: 30rpx;
		margin: 0 18rpx;
		text-align: left;
		font-weight: bold;
	}

	.recommend-car-list {
		display: flex;
		align-content: flex-start;
		text-align: center;
		font-size: 24rpx;
		justify-items: left;
		flex-wrap: wrap;
	}

	.single-car {
		width: 180rpx;
		height: 150rpx;
		margin-top: 30rpx;
		margin-bottom: 20rpx;
	}

	.single-car:nth-child(2),
	.single-car:nth-child(5) {
		margin: 30rpx 56rpx 0;
	}

	.single-car-img image {
		width: 194rpx;
		height: 146rpx;
		border-radius: 10rpx;
	}

	.shop-w {
		display: inline-block;
		width: 140rpx;
	}

	.radio-box {
		// display: inline-block;
		// width: 33%!important;
		margin-right: 40rpx;
		height: 40rpx;
	}

	.car-t-name {
		margin-top: 20rpx;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		
		.car-t__txt {
			width: 80%;
			font-size: 36rpx;
			font-weight: bold;
		}
	}

	.check-fr {
		position: relative;
		margin-right: 5rpx;
		display: inline-block;
		vertical-align: -1rpx;
	}

	.checkbox {
		width: 28rpx;
		height: 28rpx;
		opacity: 0;
	}

	// .iconblchecked,
	// .iconchecked {
	// 	display: inline-block;
	// 	width: 28rpx;
	// 	height: 28rpx;
	// 	position: absolute;
	// 	left: 0;
	// 	top: 6rpx;
	// 	font-size: 28rpx;
	// 	z-index: 5;
	// }

	.iconblchecked {
		color: #9a9a9a;
	}

	.iconchecked {
		color: #fc830c;
	}

	.mask {
		position: fixed;
		width: 100%;
		left: 0;
		top: 0;
		z-index: 50;
		height: 100%;
		background: rgba(0, 0, 0, 0.8);
		z-index: 99;
	}

	.movable-area {
		width: 100%;
		height: 100vh;
	}

	.movable-view {
		width: 100%;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.iconshoucang-yixuanzhong {
		color: #fc830c;
	}

	.car-price-block {
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0px 2px 8px 0px rgba(159, 159, 159, 0.15);
		margin: 30rpx;
		background-color: #fff;
		padding: 30rpx 5rpx;

		&__item {
			flex: 1;

			border-right: 1px solid rgba(218, 218, 218, 0.35);
			color: #333;
			font-size: 30rpx;
			font-weight: bold;
			text-align: center;

			&:last-child {
				border-right: 0;
			}

			.price-number {
				font-size: 36rpx;
			}

			.price-txt {
				font-size: 24rpx;
			}

			.price-number-block {
				&--orange {
					color: #fc830c;
				}
				&--red {
					color: #e31805;
				}
				&--primary{
					color:#52D341;
				}
			}
		}
	}

	.more-compare {
		padding: 30rpx;
		border-bottom: 20rpx solid #f8f8f8;

		color: #333;
		font-weight: bold;

		&__content {
			margin-top: 28rpx;
			padding: 0;
		}

		&__item {
			font-size: 28rpx;
			font-weight: bold;
			overflow: hidden;
			margin-top: 30rpx;
			padding: 30rpx;
			box-shadow: 0rpx 4rpx 15rpx 0rpx rgba(0, 0, 0, 0.1);
			border-radius: 10rpx;

			&--txt {
				overflow: hidden;
				display: flex;
				justify-content: space-between;
				width: 100%;
			}

			&__name {
				width: 70%;
			}

			&__price {
				color: #fc830c;
				float: right;

				.icon-price {
					font-size: 26rpx;
					margin-right: 8rpx;
					color: #fc830c;
				}
			}

			&__origin-price {
				float: right;
				margin-top: 20rpx;
				font-size: 24rpx;
				color: #999;
				font-weight: 400;
			}
		}
	}
}


.preview{
	padding: 30rpx;
	&-swiper{
		height: 135rpx;
	}
	&-item__image{
		width: 135rpx;
		height: 135rpx;
		border-radius: 10rpx;
	}
}
.phone-popup-body{
	border-bottom: 8rpx solid rgba(0,0,0,0.5);
}
.phone-popup-action{
	&__button{
		font-size: 26rpx;
		height: 88rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
.phone-list{
	// padding: 0 30rpx;
	&__item{
		display: flex;
		justify-content: center;
		height: 88rpx;
		line-height: 88rpx;
		padding: 0 100rpx;
		color: #444444;
		font-size: 26rpx;
		&+&{
			box-shadow: 0 -1rpx 0.5rpx -1rpx #CCCCCC;
		}			
	}
	&__inner{
		display: flex;
	}
	&__phone{
		margin-left:50rpx;
		text-align: center;
	}
}
</style>
